<template>
  <div id="BatchIncreaseStaff">
    <el-dialog
      title="批量增员"
      :before-close="handleClose"
      :visible="visible"
      width="450px"
    >
      <el-form
        :model="editForm"
        class="editForm"
        ref="editForm"
        label-width="auto"
        :rules="rules"
      >
        <el-form-item label="参保初始月份：" prop="initDate">
          <el-date-picker
            value-format="yyyy-MM"
            @change="(date) => handleDateChange(date)"
            v-model="editForm.initDate"
            type="month"
            placeholder="请选择参保初始月份"
          />
        </el-form-item>
        <el-form-item label="关联参保规则：" prop="ssafId" ref="ssafId">
          <el-select
            placeholder="请选择参保规则"
            v-model="editForm.ssafId"
            clearable
            @change="handleRuleChange"
          >
            <!-- ruleId -->
            <el-option
              v-for="item in ruleList"
              :key="item.ruleId"
              :label="item.ruleName"
              :value="item.ruleId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参保城市：" prop="ssafCityId">
          <CitySelect
            :data.sync="editForm.ssafCityId"
            @change="handleCityChange"
            :disabled="true"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button  @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CitySelect from "./CitySelect.vue";
export default {
  name: "BatchIncreaseStaff",
  components: {
    CitySelect,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      editForm: {
        ssafCityId: 0,
        ssafCity: "",
        ssafId: null,
        subId: "",
        initDate: "",
      },
      ruleList: [],
      rules: {
        // 表单校验
        initDate: [
          { required: true, message: "请选择参保时间", trigger: "blur" },
        ],
        ssafId: [
          { required: true, message: "请选择参保规则", trigger: "blur" },
        ],
        ssafCityId: [
          { required: true, message: "请选择参保城市", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /**
     * @description 获取规则下拉框数据
     */
    searchRuleSelectList() {
      this.$api.socialSecurity.GetSsafRuleNameList().then((res) => {
        this.ruleList = res.data.data;
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
      this.editForm = {
        ssafCityId: 0,
        ssafId: null,
        subId: "",
        ssafCity: "",
        ssafCityId: 0,
        userIdList: [],
      };
    },
    handleCityChange(data) {
      this.editForm.ssafCity = data.insuredCity;
      this.editForm.ssafCityId = data.insuredCityId;
    },
    handleRuleChange(ruleId) {
      const ruleData = this.ruleList.find((e) => e.ruleId == ruleId);
      const propList = [
        { name: "ssafId", base: null, selectName: "ruleId" },
        { name: "ssafName", base: "", selectName: "ruleName" },
        { name: "ssafCityId", base: 0, selectName: "insuredCityId" },
        { name: "ssafCity", base: "", selectName: "insuredCity" },
      ];
      if (ruleId) {
        //选择了规则
        propList.map((prop) => {
          this.$set(this.editForm, prop.name, ruleData[prop.selectName]);
        });
        this.$refs.ssafId.clearValidate();
      } else {
        //清空选择
        propList.map((prop) => {
          this.editForm[prop.name] = prop.base;
        });
      }
    },
    handleDateChange(date) {
      this.editForm.initYear = date.substring(0, 4) * 1;
      this.editForm.initMonth = date.substring(5, 7) * 1;
    },
    handleSubmit() {
      this.editForm.userIdList = this.list.map((e) => e.userId);
      this.editForm.subId = this.list[0].subId;
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          delete this.editForm.initDate;
          this.batchAddArchives();
        } else {
          return false;
        }
      });
    },
    batchAddArchives() {
      this.$api.socialSecurity
        .BatchAddArchives(this.editForm)
        .then((res) => {
          if (res.data.status == 200) {
            this.$message.success(res.data.message);
            this.handleClose();
            this.$emit("search", true);
          } else {
            this.$message.warning(res.data.message);
          }
        })
        .finally(() => {
          this.$set(this.editForm, "initDate", "");
        });
    },
  },
  mounted() {
    this.searchRuleSelectList();
  },
};
</script>